<template>
  <div class="open_group border-1 border-r center bg-32 max_w-1200">
    <div class="openBox">
      <div class="closeImg" @click.stop="hundleClose">
        <img src="../../../assets/icon/x.svg" alt="">
      </div>
      <div class="w_90 mgt-20">
        <div class="flex-r-ss">
          <div class="fontW-b color-af47 font-36 flex-1">{{$t('buypage.groupBuyStatus')}}</div>
          <div class="flex-1 text-c">
            <div class="brokerImg"><img src="../../../assets/img/tx1.svg" alt=""></div>
            <p class="font-25 fontW-7 color-f mgb-10">Joha bro</p>
          </div>
        </div>
        <div class="openWork flex">
          <div class="flex-1 flex">
            <div class="openWork_img">
              <img src="../../../assets/img/sell.jpg" alt="">
            </div>
            <div class="flex-c-ss mgl-20">
              <div>
                <p class="font-30 fontW-9 color-af47">Super shoe</p>
                <p class="font-26 fontW-9 color-af47">#3461</p>
              </div>
              <div>
                <p class="font-20 fontW-7 color-fe50">
                  {{$t('buypage.groupBuyPrice')}}
                  <img style="width:20px;margin-bottom:5px" class="mgr-10" src="../../../assets/ETH/IMEETNFT.svg" alt="">
                </p>
                <p class="font-36 fontW-7 color-f">298.32</p>
              </div>
            </div>
          </div>
          <div class="flex-1">
            <div class="">
              <div class="font-20 fontW-7 color-f text-c mgtb-10">{{$t('buypage.groupTips')}}</div>
              <div class="openEdit mg-0">
                <div class="flex-r-base groupNum">
                  <div class="bg-f boxS-i-4 border-r pd-5 flex h-37 flex-n-center">
                    <input v-model="minPeople" class="font-25" type="text" placeholder="0.05">
                    <div class="font-25">%</div>
                  </div>
                  <div class="pdlr-10">
                    <div class="font-25 fontW-7 color-f">≈</div>
                    <div class="font-20 fontW-7 color-f">≈</div>
                  </div>
                  <div class="">
                    <div class="bg-f boxS-i-4 border-r pd-5 flex h-37 flex-n-center">
                      <input v-model="maxPeople" class="font-25 text-r" type="text" placeholder="100">
                      <div class="font-25">%</div>
                    </div>
                    <div class="flex-s-between color-f mgt-5">
                      <p>ETH</p>
                      <p>0.23</p>
                    </div>
                  </div>
                </div>
                <div class="mgt-10">
                  <div class="flex-s-between color-f">
                    <p>2</p>
                    <p>200</p>
                  </div>
                  <div>
                    <el-slider v-model="groupPersonNum" :min="2" :max="200"/>
                  </div>
                  <div class="font-15 fontW-7 color-f mgb-20 text-c">{{$t('buypage.groupPersonSetting')}}</div>
                </div>
                <div>
                  <el-button type="primary" class="bg-ffc4 color-f font-f-ib font-26 fontW-7 btnHove border-r" >{{$t('btn.openSell')}}</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w_90 mg-0">
        <div class="mgtb-30">
          <div class="font-20 fontW-7 color-f">{{$t('set_broker.rule')}}</div>
          <div class="font-20 fontW-7 color-f">1、{{$t('set_broker.grouPpeople')}}</div>
          <div class="font-20 fontW-7 color-f">2、{{$t('set_broker.text_2')}}</div>
          <div class="font-20 fontW-7 color-f">3、{{$t('set_broker.text_3')}}</div>
          <div class="font-20 fontW-7 color-f">4、{{$t('set_broker.text_4')}}</div>
          <div class="font-20 fontW-7 color-f">5、{{$t('set_broker.agent')}}</div>
          <div class="font-20 fontW-7 color-f">6、{{$t('set_broker.text_6')}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      msg: 'opengroup',
      minPeople: '',
      maxPeople: '',
      groupPersonNum: 120
    }
  },
  methods: {
    hundleClose: function () {
      this.$emit('oncenSHow', false)
    }
  }
}
</script>
<style lang="less" scoped>
.open_group {
  width: 75%;
  height: auto;
  overflow: hidden;
  .openBox {
    position: relative;
    .closeImg {
      position: absolute;
      top: 10px;
      right: 30px;
      cursor: pointer;
    }
    .w_90 {
      width: 90%;
      .brokerImg {
        img {
          width: 78px;
        }
      }
      .openWork {
        .openWork_img {
          img {
            width: 200px;
          }
        }
        .openEdit {
          width: 65%;
          .groupNum {
            input {
              background: none;
              width: 100%;
            }
          }
          /deep/.el-button--primary:focus, .el-button--primary, .el-button--primary:hover {
            width: 100%;
            background: #fe66c4;
            border: 0;
          }
          /deep/.el-slider__runway{
            margin: 0;
            .el-slider__bar, .el-slider__button{
              background: #fe66c4;
              border-color: #A0F4F7;
            }
          }
        }
      }
    }
  }
}
</style>
